<template>
  <div class="bg-white rounded-lg shadow-lg p-4">
    <div class="grid grid-cols-2 gap-4">

      <!-- 帖子 -->
      <div
        class="relative flex flex-col items-center justify-center p-4 h-32 rounded-lg cursor-pointer transition-all duration-300 hover:shadow-lg hover:scale-105 bg-gradient-to-br from-yellow-50 to-white border border-yellow-100"
        @click="handleClick('post')"
        @mouseenter="setHoverState('post', true)"
        @mouseleave="setHoverState('post', false)"
        :class="{'opacity-60': loading}"
      >
        <div v-if="badges.post > 0" class="badge bg-yellow-500">
          {{ badges.post > 99 ? '99+' : badges.post }}
        </div>
        <i class="fas fa-file-alt text-3xl text-yellow-500 mb-2" :class="{'animate-pulse': hoverStates.post}"></i>
        <span class="text-gray-700 font-medium">帖子</span>
        <span class="text-xs text-gray-500 mt-1">浏览社区帖子</span>
      </div>

      <!-- 相册 -->
      <div 
        class="relative flex flex-col items-center justify-center p-4 h-32 rounded-lg cursor-pointer transition-all duration-300 hover:shadow-lg hover:scale-105 bg-gradient-to-br from-blue-50 to-white border border-blue-100"
        @click="handleClick('album')"
        @mouseenter="setHoverState('album', true)"
        @mouseleave="setHoverState('album', false)"
        :class="{'opacity-60': loading}"
      >
        <div v-if="badges.album > 0" class="badge bg-blue-500">
          {{ badges.album > 99 ? '99+' : badges.album }}
        </div>
        <i class="fas fa-images text-3xl text-blue-500 mb-2" :class="{'animate-pulse': hoverStates.album}"></i>
        <span class="text-gray-700 font-medium">相册</span>
        <span class="text-xs text-gray-500 mt-1">查看社区精彩瞬间</span>
      </div>

      <!-- 活动 -->
      <div 
        class="relative flex flex-col items-center justify-center p-4 h-32 rounded-lg cursor-pointer transition-all duration-300 hover:shadow-lg hover:scale-105 bg-gradient-to-br from-green-50 to-white border border-green-100"
        @click="handleClick('event')"
        @mouseenter="setHoverState('event', true)"
        @mouseleave="setHoverState('event', false)"
        :class="{'opacity-60': loading}"
      >
        <div v-if="badges.event > 0" class="badge bg-green-500">
          {{ badges.event > 99 ? '99+' : badges.event }}
        </div>
        <i class="fas fa-calendar-alt text-3xl text-green-500 mb-2" :class="{'animate-pulse': hoverStates.event}"></i>
        <span class="text-gray-700 font-medium">活动</span>
        <span class="text-xs text-gray-500 mt-1">参与社区线上线下活动</span>
      </div>

      <!-- 公告 -->
      <div 
        class="relative flex flex-col items-center justify-center p-4 h-32 rounded-lg cursor-pointer transition-all duration-300 hover:shadow-lg hover:scale-105 bg-gradient-to-br from-red-50 to-white border border-red-100"
        @click="handleClick('announcement')"
        @mouseenter="setHoverState('announcement', true)"
        @mouseleave="setHoverState('announcement', false)"
        :class="{'opacity-60': loading}"
      >
        <div v-if="badges.announcement > 0" class="badge bg-red-500">
          {{ badges.announcement > 99 ? '99+' : badges.announcement }}
        </div>
        <i class="fas fa-bullhorn text-3xl text-red-500 mb-2" :class="{'animate-pulse': hoverStates.announcement}"></i>
        <span class="text-gray-700 font-medium">公告</span>
        <span class="text-xs text-gray-500 mt-1">查看社区重要通知</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommunityQuickAccess',
  props: {
    communityId: {
      type: String,
      required: true
    },
    // 可选的徽章数据
    badges: {
      type: Object,
      default: () => ({
        album: 0,
        event: 0,
        post: 0,
        announcement: 0
      })
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 动画状态
      hoverStates: {
        album: false,
        event: false,
        post: false,
        announcement: false
      }
    };
  },
  methods: {
    handleClick(type) {
      // 如果正在加载，不处理点击事件
      if (this.loading) return;
      
      // 触发点击事件，将类型和社区ID传递给父组件
      this.$emit('item-click', {
        type,
        communityId: this.communityId
      });
    },
    
    // 设置悬停状态
    setHoverState(type, state) {
      this.hoverStates[type] = state;
    }
  }
};
</script>

<style scoped>
/* 徽章样式 */
.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}
</style>